/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

$border-shadow-color: #cccccc;
$normal-caret-color: #666666;
$normal-caret-outline-color: $normal-caret-color;
$normal-caret-bg-color: white;
$hover-caret-color: white;
$hover-caret-bg-color: #0076dc;
$hover-caret-outline-color: $hover-caret-bg-color;
$dropdown-expanded-caret-bg-color: #999999;
$dropdown-expanded-caret-color: $hover-caret-color;
$action-item-bg-color: white;
$action-item-hover-color: #eeeeee;
$action-item-active-color: #dddddd;
$action-item-font-color: #373a3c;
$action-item-action-font-color: #333333;
$action-item-font-family: Helvetica, Arial, sans-serif;
$action-item-disabled-color: lighten($action-item-font-color, 50%);
$column-type-label-color: #b6babc;

.column-actions-dropdown-container {
  > .fa.fa-caret-down {
    padding: 0;
    position: relative;
    height: 15px;
    width: 15px;
    border-radius: 4px;
    box-shadow: 1px 1px 5px $border-shadow-color;
    outline: 0;
    color: $normal-caret-color;
    background-color: $normal-caret-bg-color;
    border-color: $normal-caret-outline-color;
    justify-content: center;
    display: flex;
    border-width: 1px;

    &:hover {
      box-shadow: none;
      background-color: $hover-caret-bg-color;
      color: $hover-caret-color;
      border-color: $hover-caret-outline-color;
    }

    &.expanded {
      box-shadow: none;
      background-color: $dropdown-expanded-caret-bg-color;
      color: $dropdown-expanded-caret-color;
      border-color: $dropdown-expanded-caret-bg-color;
    }
  }
}

.dataprep-columns-action-dropdown {
  width: 200px;
  background-color: $action-item-bg-color;
  font-weight: 500;

  .popover-body {
    padding: 0;
    box-shadow: 1px 1px 5px $border-shadow-color;

    .disabled {
      /* using color here instead of just opacity, because this class might be applied multiple times */
      color: $action-item-disabled-color;

      .action-item {
        cursor: not-allowed;
      }
    }

    .column-action-divider {
      hr {
        margin: 2px 0;
        border-color: $border-shadow-color;
      }
    }
  }

  .action-item {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    font-family: $action-item-font-family;
    font-size: 13px;

    &:hover:not(.active) {
      background-color: $action-item-hover-color;
    }

    &.active {
      background-color: $action-item-active-color;
    }

    &.disabled {
      cursor: not-allowed;
    }

    .second-level-popover {
      position: absolute;
      top: 0;
      left: 100%;
      background-color: white;
      border: 1px solid $border-shadow-color;
      padding: 10px;
      width: 200px;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 2;
      cursor: initial;
      box-shadow: 1px 1px 5px $border-shadow-color;

      .column-type-label {
        height: 11px;
        width: 100%;
        color: $column-type-label-color;
        border-bottom: 1px solid currentColor;
        clear: both;
        padding-left: 20px;
        margin-bottom: 10px;

        > span {
          background-color: white;
          padding: 0 7px;
        }
      }

      .warning-container {
        margin-bottom: -5px;

        .warning-title-container {
          margin-left: -10px;
          margin-right: -10px;
        }
      }

      .cursor-pointer { cursor: pointer; }

      h5 {
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 10px;
      }

      hr {
        border-color: $border-shadow-color;
        margin-left: -10px;
        margin-right: -10px;
      }

      span.fa {
        margin-right: 5px;
      }

      .btn-link {
        color: $action-item-action-font-color;
      }
    }

    .third-level-popover {
      @extend .second-level-popover;

      .create-new-column-line {
        cursor: pointer;
      }
    }

    .icon-caret-right {
      width: 5px;
    }
  }
}

.popover {
  &.column_actions_dropdown-element {
    padding: 0;
    border-radius: 0;
    z-index: 999; // z-index of service down modal is 1000
    margin-left: 0;
    margin-top: 5px;

    &[data-x-out-of-boundaries] {
      display: none;
    }
  }
}
